<template>
  <div class="margin-top padding-tb-sm flex justify-center" v-if="pages !== 1">
    <div class="flex align-center">
      <button class="btn-prev" type="button" @click="handlePageBtn(0)">
        <i class="el-icon-arrow-left"></i>
      </button>
      <ul class="flex">
        <li
          :class="['number', currentPage == index + 1 ? 'active' : '']"
          v-for="(item, index) in pages"
          :key="index"
          @click="handlePage(index + 1)"
        >
          {{ index + 1 }}
        </li>
      </ul>
      <button type="button" class="btn-next" @click="handlePageBtn(1)">
        <i class="el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoadMore",
  props: {
    total: {
      type: Number,
      default: 0,
    },
    limit: {
      type: Number,
      default: 6,
    },
  },
  watch: {
    total(newVal, oldval) {
      this.total = newVal;
      this.handleInitDatas();
    },
  },
  data() {
    return {
      currentPage: 1,
      pages: 0,
    };
  },
  methods: {
    handleInitDatas() {
      this.pages = Math.ceil(this.total / this.limit);
    },
    handlePage(page) {
      if (this.currentPage == page) return;
      this.currentPage = page;
      this.handleEmit(page);
    },
    handlePageBtn(flag) {
      if (flag == 1 && this.currentPage == this.pages) return;
      if (flag == 0 && this.currentPage == 1) return;
      flag ? (this.currentPage += 1) : (this.currentPage -= 1);
      this.handleEmit(this.currentPage);
    },
    handleEmit(page) {
      this.$emit("currentChange", page);
    },
  },
};
</script>

<style lang='scss' scoped>
ul,
li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
button {
  cursor: pointer;
  outline: none;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 2px;
  color: #111;
  font-size: bold;
  background: rgb(240, 239, 234);
  text-shadow: 2px 2px 1px #fff;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
}
.btn-prev {
  margin-right: 5px;
}
.btn-next {
  margin-left: 5px;
}
.number {
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  text-shadow: 2px 2px 1px #fff;
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 2px;
  margin: 0px 5px;
  text-align: center;
  line-height: 35px;
  background: rgb(240, 239, 234);
}
.active {
  background: rgb(255, 245, 227) !important;
}
</style>
